<script setup lang="ts">
import { reactive, onMounted, watch } from 'vue'
import { getLoginLog } from '@/api/monitor'
import { Paging, dateShortcuts } from '@/config/public'

defineOptions({
  name: 'LoginLog'
})

const state = reactive({
  searchKey: '',
  logoTime: [],
  // 表格數據
  tableView: [],
  // 分頁相關屬性
  totalCount: 0,
  pageSizes: Paging.sizes,
  param: {
    key: '',
    pageNo: 1,
    pageSize: Paging.defaultSize,
    params: {
      Q_create_time_D_GE: '',
      Q_create_time_D_LE: ''
    },
    sortField: '',
    sortOrder: ''
  }
})
onMounted(async () => {
  init()
})
const changePage = (page) => {
  state.param.pageNo = page
  init()
}
//重置输入条件
const resetInput = () => {
  state.logoTime = []
  state.searchKey = ''
}
const changePageSize = (pageSize) => {
  state.param.pageSize = pageSize
  state.param.pageNo = 1
  init()
}
// 搜索
const handleSearch = () => {
  state.param.key = state.searchKey
  state.param.params.Q_create_time_D_GE = state.logoTime[0] || ''
  state.param.params.Q_create_time_D_LE = state.logoTime[1] || ''
  init()
}

watch(
  () => state.logoTime,
  (val) => {
    if (val == null) {
      state.logoTime = []
    }
  },
  { immediate: true }
)
//渲染页面的接口
const init = async () => {
  await getLoginLog(state.param).then((res) => {
    if (res) {
      const data = res as any
      state.tableView = data.result.data
      state.totalCount = data.result.totalCount
    }
  })
}
</script>
<template>
  <div>
    <!-- 搜索卡片 -->
    <el-card class="box-card">
      <el-row
        :gutter="10"
        style="padding: 5px 5px; line-height: 28px"
        align="middle"
        justify="space-between"
      >
        <el-col :sm="5" :md="3">{{ $t('common.searchKey') }}</el-col>
        <el-col :sm="12" :md="6">
          <el-input
            v-model="state.searchKey"
            @keyup.enter="handleSearch"
            :placeholder="$t('monitor.inputAccountOrIP')"
          />
        </el-col>
        <el-col :sm="5" :md="3">{{ $t('monitor.operateTime') }}</el-col>
        <el-col :sm="14" :md="8">
          <el-date-picker
            v-model="state.logoTime"
            value-format="YYYY-MM-DD hh:mm:ss"
            type="datetimerange"
            :shortcuts="dateShortcuts"
            :range-separator="$t('common.fromto')"
            :start-placeholder="$t('common.startTimeText')"
            :end-placeholder="$t('common.endTimeText')"
          />
        </el-col>
        <el-col :sm="6" :md="4" style="text-align: right">
          <div style="margin: 5px 0">
            <el-button @click="handleSearch" type="primary" size="small" plain
              ><Icon icon="ic:outline-search" /><span>{{ $t('common.query') }}</span></el-button
            >
            <el-button @click="resetInput" type="info" size="small" plain>
              <Icon icon="icon-park-solid:clear-format" /><span>{{
                $t('common.reset')
              }}</span></el-button
            ></div
          >
        </el-col>
      </el-row>
    </el-card>
  </div>
  <!-- 搜索列表卡片 -->
  <el-card class="formcard">
    <!-- 搜索結果表格 -->
    <el-table
      :data="state.tableView"
      size="default"
      tooltip-effect="light"
      style="width: 100%; border-color: #a0cfff"
      stripe
      class="systemlog"
      :header-cell-style="{
        background: 'var(--el-color-primary-light-9)',
        color: '#409eff'
      }"
    >
      <el-table-column type="index" min-width="60">
        <template #header>
          <div style="margin-bottom: -10px">
            <Icon icon="ant-design:field-number-outlined" size="24" :title="$t('common.number')"
          /></div>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" :label="$t('monitor.loginTime')" min-width="140" />
      <el-table-column prop="logoutTime" :label="$t('monitor.logoutTime')" min-width="140" />
      <el-table-column prop="loginName" :label="$t('company.userAccount')" min-width="120" />
      <el-table-column prop="ipAddr" :label="$t('monitor.ipAddr')" min-width="100" />

      <el-table-column prop="isFail" :label="$t('monitor.result')" min-width="80" align="center">
        <template #default="{ row }">
          <span v-if="row.isFail == 1">{{ $t('monitor.fail') }}</span>
          <span v-else>{{ $t('monitor.success') }}</span>
        </template></el-table-column
      >
      <el-table-column
        prop="failReason"
        :label="$t('monitor.failReason')"
        show-overflow-tooltip
        min-width="240"
        ><template #default="{ row }">
          <span v-if="row.failReason">{{ $t(row.failReason) }}</span>
          <span v-else>&nbsp;</span>
        </template></el-table-column
      >
      <el-table-column
        prop="clientType"
        :label="$t('menu.clientType')"
        min-width="80"
        align="center"
      >
        <template #default="{ row }">
          <span v-if="row.clientType == 1">H5</span>
          <span v-else-if="row.clientType == 2">Android</span>
          <span v-else-if="row.clientType == 4">IOS</span>
          <span v-else>PC</span>
        </template></el-table-column
      >
    </el-table>

    <!-- 分頁器 -->
    <div class="demo-pagination-block"
      ><el-pagination
        v-model:currentPage="state.param.pageNo"
        v-model:page-size="state.param.pageSize"
        @current-change="changePage"
        @size-change="changePageSize"
        :page-sizes="state.pageSizes"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="state.totalCount"
    /></div>
  </el-card>
</template>

<style lang="less" scoped>
// 搜索卡片樣式
:deep(.el-card__header) {
  border-bottom: 0;
  box-sizing: border-box;
}

:deep(.el-input__inner) {
  height: 28px;
  line-height: 28px;
}

:deep(.el-form-item__label) {
  font-size: 12px;
  width: 30%;
  margin: 0 auto;
}
:deep(.el-input-group__append) {
  background-color: #ecf5ff;
  border-color: #a0cfff;
  color: #409eff;
  box-shadow: #409eff;
  cursor: pointer;
}
:deep(.el-input-group__append):hover {
  background-color: #ecf5ff;
  border-color: #409eff !important;
  color: #409eff;
  box-shadow: #409eff;
  cursor: pointer;
}
:deep(.el-input) {
  border-color: #a0cfff;
  font-size: 12px;
}
:deep(.el-date-editor > *) {
  font-size: 12px;
}
// 列表卡片樣式
.formcard {
  margin-top: 8px;
}
// 列表樣式
.systemlog {
  font-size: 12px;
}

// 分頁器樣式
.demo-pagination-block {
  display: flex;
  justify-content: center;
  justify-items: center;
  margin-top: 20px;
  margin-bottom: 20px;
}
:deep(.el-pagination__sizes > .el-select) {
  margin-top: -3px;
}
:deep(.el-pager li) {
  font-size: 12px;
  height: 28px;
  margin-top: -1px;
}
:deep(.el-pagination span:not([class*='suffix'])) {
  font-size: 12px;
}
</style>
